<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html class="maxed">
	<head>
	<xsl:element name="style">
		* {
			padding: 0px;
			margin: 0px;
		}

		img {
			border:none;
		}

		a {
			overflow: auto;
		}

		body {
			background-image:url('<xsl:value-of select="adventure/@backgroundimage"/>');
			background-color:<xsl:value-of select="adventure/@backgroundcolor"/>;
			background-repeat:no-repeat;
			background-position:center;
			background-attachment:scroll;
			background-size: 100% 100%;
		}

		.maxed {
			height:100%;
			width:100%;
		}

		.event-widget {
			background-repeat:no-repeat;
			background-position:center;
			background-size: 100% 100%;
			float: left;
		}

		<xsl:for-each select="adventure/event">
		#<xsl:value-of select="@id"/> {
			width: <xsl:value-of select="@horizontalsize"/>%;
			height: <xsl:value-of select="@horizontalsize"/>%;
			background-image: url('<xsl:value-of select="@backgroundimage"/>');
		}
		</xsl:for-each>

		.choice {
			position: relative;
			background-repeat:no-repeat;
			background-position:center;
			background-size: 100% 100%;
            display: block;
            text-indent:-9999px;
		}

		<xsl:for-each select="adventure/event/choice">
		#<xsl:value-of select="@id"/> {
			width: <xsl:value-of select="@horizontalsize"/>%;
			height: <xsl:value-of select="@verticalsize"/>%;
			left: <xsl:value-of select="@horizontalplacement"/>%;
			<xsl:choose>
				<xsl:when test="position() &gt; 1">
					top: <xsl:value-of select="@verticalplacement - (preceding-sibling::choice[1]/@verticalplacement + preceding-sibling::choice[1]/@verticalsize)"/>%;
				</xsl:when>
				<xsl:otherwise>
					top: <xsl:value-of select="@verticalplacement"/>%;
				</xsl:otherwise>
			</xsl:choose>
			background-image: url('<xsl:value-of select="@backgroundimage"/>');
		}
		</xsl:for-each>

	</xsl:element>

	<script type="text/javascript" src="src/jquery.js"></script>
	<script type="text/javascript" src="src/jquery.address.js"></script>
	<script type="text/javascript" src="src/transformer.js"></script>

	<title><xsl:value-of select="adventure/@name"/></title>
	</head>
	<body class="maxed">
		<xsl:for-each select="adventure/event">
			<div class="event-widget">
				<xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>
				<xsl:for-each select="choice">
					<a class="choice">
						<xsl:attribute name="href">
							<xsl:value-of select="@event"/>
						</xsl:attribute>
						<xsl:attribute name="id">
							<xsl:value-of select="@id"/>
						</xsl:attribute>
						<xsl:value-of select="@id"/>
					</a>
				</xsl:for-each>
			</div>
		</xsl:for-each>
	</body>
  </html>
</xsl:template>

</xsl:stylesheet>
